- title = _('Two-Factor Authentication')
- breadcrumb_title title
- page_title title, _('Account')
- add_to_breadcrumbs _('Account'), profile_account_path
- troubleshooting_link = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication_troubleshooting.md'), target: '_blank', rel: 'noopener noreferrer'

- content_for :after_flash_content do
  .flash-container.flash-container-page.sticky
    - if @error
      = render Pajamas::AlertComponent.new(title: @error[:message],
        variant: :danger,
        dismissible: false) do |c|
        - c.with_body do
          = troubleshooting_link

    = render 'profiles/accounts/two_factor_enabled_alert'

- if Feature.enabled?(:passkeys, current_user)
  = render ::Layouts::SettingsSectionComponent.new(s_("ProfilesAuthentication|Passkeys sign-in")) do |c|
    - c.with_description do
      = s_("ProfilesAuthentication|Passkeys allow you to sign in securely with your device instead of a password. Learn more about passkeys.")
    - c.with_body do
      %p
        %span.gl-font-bold
          = _('Status:')
        #{@passkeys.present? ? _('Enabled') : _('Disabled')}
      = render 'passkeys'

= render ::Layouts::SettingsSectionComponent.new(title) do |c|
  - c.with_description do
    .gl-flex.gl-flex-wrap.gl-gap-3.gl-justify-between.gl-items-center.gl-mt-2
      %div
        = _("Increase your account's security by enabling two-factor authentication (2FA).")
      - if current_user.two_factor_enabled?
        .gl-w-full{ class: "@sm/panel:gl-w-auto" }
          .js-two-factor-action-confirm{ data: disable_two_factor_authentication_data(current_password_required?) }
    - if Feature.enabled?(:passkeys, current_user) && !current_user.two_factor_enabled? && @passkeys.present?
      = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mt-5' }) do |c|
        - c.with_body do
          = s_('ProfilesAuthentication|To use passkeys as your default two-factor authentication, please register at least one backup 2FA method first below.')
  - c.with_body do
    %p
      %span.gl-font-bold
        = _('Status:')
      #{current_user.two_factor_enabled? ? _('Enabled') : _('Disabled')}
    = render 'default_2fa_method'
    = render 'otp_registration', {troubleshooting_link: troubleshooting_link}
    = render 'webauthn_registration'
    = render 'passkeys_2fa'
    - if current_user.two_factor_enabled?
      = render 'recovery_codes'

- if Feature.enabled?(:email_based_mfa, current_user)
  #email-otp-settings
    = render ::Layouts::SettingsSectionComponent.new(s_("Profiles|Email one-time password (email OTP)")) do |c|
      - c.with_description do
        = s_("Profiles|Automatically sends a verification code to your primary email address during sign-in.")
      - c.with_body do
        #js-email-otp-action-confirm{ data: email_otp_enrollment_restriction_confirm_data(current_user) }
